<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f = "http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui"  
      xmlns:ui="http://java.sun.com/jsf/facelets">
    <h:head>
        <title>Create-RefPortal</title>
    </h:head>   
    <h:body> 
        <ui:composition template="./BannersAndMenusTemplate.jsf">

            <ui:define name="content">
                <h:form id="form">
                    <p:panel header="Creating an Account">  
                        <p:messages id="messages" showDetail="false" autoUpdate="true"/> 
                        <h:panelGrid columns="2" id="matchGrid">      
                            <h:outputLabel  value="Name: *" />  
                            <p:inputText value = "#{user.name}"/> 

                            <p:watermark for="email" value="" />
                            <h:outputLabel  value="" />  

                            <h:outputLabel  value="Email: *" />  

                            
                            <p:inputText id="email" required="true" label="email"  
                                         requiredMessage="Please enter your email address."
                                         validatorMessage="Incorrect email format"
                                         value="#{user.email}">
                            <f:validateRegex
                                    pattern="^[_A-Za-z0-9-\+]+(\.[_A-Za-z0-9-]+)*@[A-Za-z0-9-]+(\.[A-Za-z0-9]+)*(\.[A-Za-z]{2,})$" />

                            </p:inputText> 

                            <h:outputLabel for="pwd1" value="Password: *" />  
                            <p:password requiredMessage="" id="pwd1" value="#{user.password}" match="pwd2" label="Password 1" required="true"/>  
                            <h:outputLabel for="pwd2" value="Confirm Password: *" />  
                            <p:password requiredMessage="Password mismatch" id="pwd2" value="#{user.password}" label="Password 2" required="true"/>  
                        </h:panelGrid>  

                        <p:commandButton id="saveButton" update="matchGrid" value="Save" action = "#{user.createUser}"/>  

                    </p:panel>       
                </h:form>
            </ui:define>

        </ui:composition> 


    </h:body>  

</html>

